<template>
  <view class="vul">
        <view class="vli" v-for="(item,index) in porhotlist" :key="index">
          <view class="vtop">
            <image :src=item.Image mode="">
            </image>
          </view>
          <view class="vbottom">
            <view class="lititle">
              {{item.title}}
            </view>
           <view class="price">
             ￥{{item.price}}
           </view>
            <view class="cart">
          <view class="iconfonta icon-gouwuche1:before">
          </view>
            </view>
 </view>
          </view>
        </view>
     
</template>

<script setup>
import { reactive } from 'vue';
  
  //定义人气热卖数据
  const porhotlist = reactive([{
      Image: "https://24085789.s61i.faimallusr.com/2/AD0InYq_CxACGAAgsZXi_gUo0OCxygIw7gU47gU!400x400.jpg",
      title: "设计师款落地灯",
      price: 89,
     
    },
    {
      Image: "https://24085789.s61i.faimallusr.com/2/AD0InYq_CxACGAAgwZXi_gUopuKtbDDuBTjuBQ!400x400.jpg",
      title: "国AA级台灯护眼书桌小学生宿舍led插电两用学习专用卧室少女心ins",
      price: 96,
    
    },
    {
      Image: "https://24085789.s61i.faimallusr.com/2/AD0InYq_CxACGAAg5JTi_gUolp6S4QEw7gU47gU!400x400.jpg",
      title: "led灯泡节能大螺口家用商用大功率光源超亮E27球泡E14螺旋",
      price: 80,
  
    },
    {
      Image: "https://24085789.s61i.faimallusr.com/2/AD0InYq_CxACGAAg0JXi_gUo_v7LFzDuBTjuBQ!400x400.jpg",
      title: "北欧创意西餐厅灯客厅loft个性灯具三头吧台过道吊灯铁艺工业吊灯",
      price: 99,
    },
    {
        Image: "https://24085789.s61i.faimallusr.com/2/AD0InYq_CxACGAAg8ZTi_gUo7Jz_uwQw7gU47QU!400x400.jpg",
        title: "LED吸顶灯超薄长方形大气客厅灯卧室灯现代简约书房间灯餐厅灯具",
        price: 95,
       
      },
      {
        Image: "https://24085789.s61i.faimallusr.com/2/AD0InYq_CxACGAAg-ZTi_gUorva5gQQw7gU47gU!400x400.jpg",
        title: "LED吸顶灯客厅灯简约现代大气家用长方形卧室灯餐厅阳台书房灯具",
        price: 88,
      
      },
      {
        Image: "https://24085789.s61i.faimallusr.com/2/AD0InYq_CxACGAAglJTi_gUov-XoqAcw7gU47gU!400x400.jpg",
        title: "轻奢后现代美式台灯卧室装饰床头灯欧式创意简约温馨结婚陶瓷客厅",
        price: 86,
    
      },
      {
        Image: "https://24085789.s61i.faimallusr.com/2/AD0InYq_CxACGAAgp5Ti_gUojqWmpgIw7gU47gU!400x400.jpg",
        title: "现代简约工业风餐厅吊灯创意个性北欧单头理发店饭店店铺商用灯罩",
        price: 46,
      }
  ])
</script>

<style scoped lang="scss">
  .vul {
       // border: 1px red solid;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
       background-color: #fff;
        position: relative;
       padding: 20rpx 10rpx;

       .vli:nth-child(4n+2) {
           height: 640rpx;
            .vtop{
              image{
                height: 450rpx;
              }
            }
       }
       .vli:nth-child(4n+3) {
           height: 640rpx;
             margin-top: -100rpx;
            .vtop{
              image{
                height: 450rpx;
              }
            }
       }
        .vli {
          border: 1rpx solid #F3F3F3;
          width: 350rpx;
          height: 540rpx;
          border-radius: 10rpx;
          margin-bottom: 20rpx;
          // border: 1px red solid;
          box-shadow: 2rpx 30rpx 30rpx #dadada;
          position: relative;
          .vtop {
            padding: 2rpx;
            image {
              border-radius: 10rpx 10rpx 0  0 ;
              width: 100%;
              height: 350rpx;
            }
          }

          .vbottom {
            padding: 0 20rpx;
            .lititle {
              color: #000000;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              font-size: 32rpx;
            }

           .price {
                position: absolute;
                bottom: 20rpx;
                display: inline-block;
                font-size: 35rpx;
                color: #f23030;
              }
           

            .cart {
              position: absolute;
              bottom: 20rpx;
              right: 20rpx;
            }
          }
        }
      
    }
</style>